import {
  getRandomId
} from '@/common/common.js'
import RouteDialog from './RouteDialog/index'

export default {
  name: 'LineChartProgress',
  components: {
    RouteDialog
  },
  props: {
    chartTitle: {
      type: String
    },
    chartId: {
      type: String,
      default: '11'
    },
    tabList: {
      type: Array
    },
    toDetail: {
      type: Boolean
    },
    tabBelow: {
      type: Boolean
    },
    showMonthData: {
      type: Boolean,
      default: true
    },
    showRouteDetail: {
      type: Boolean,
      default: false
    },
    showComplete: {
      type: Boolean
    },
    scrollTop:{
      type:[String,Number]
    },
    chartData: {
      type: Object,
      default: () => {
        return {
          dimensions: ['product', '2015', '2016', '2017'],
          source: [{
            product: 'Latte',
            '2015': 43.3,
            '2016': 85.8,
            '2017': 93.7
          },
            {
              product: 'Milk',
              '2015': 83.1,
              '2016': 73.4,
              '2017': 55.1
            },
            {
              product: 'Cocoa',
              '2015': 86.4,
              '2016': 65.2,
              '2017': 82.5
            },
            {
              product: 'Brownie',
              '2015': 72.4,
              '2016': 53.9,
              '2017': 39.1
            }
          ]
        }
      }
    },
    monthData: {
      type: Object,
      default: () => {
        return {
          num: '',
          tqNum: '',
          ratio: '',
          ratioVal: '',
          grow: false,
          completionRateMonth: ''
        }
      }
    }
  },
  data() {
    return {
      randomId: getRandomId(),
      tabSelIndex: 0,
      completeValue: '18%',
      imgDetail: require('static/img/ic_detail.png'),
      imgUp: require('static/img/ic_arrow_up.png'),
      imgDown: require('static/img/ic_arrow_down.png'),
      showRouteDialog: false
    }
  },
  watch: {
    chartData: {
      //深度监听，可监听到对象、数组的变化
      handler(val, oldVal) {
        // console.log('LineChartProgress-chartData')
        this.updateChartData()
      },
      deep: true
    },
    monthData: {
      //深度监听，可监听到对象、数组的变化
      handler(val, oldVal) {
        val.grow = val.ratio.toString().indexOf('-') < 0
        val.ratioVal = val.ratio + '%'
      },
      deep: true
    }
  },
  computed: {},
  mounted(){
    this.initChart()
  },
  methods: {
    showRouteInfo() {
      console.log('showRouteInfo')
      this.showRouteDialog = true
    },
    onTabSelectClick(selIndex) {
      this.tabSelIndex = selIndex
      let selId = this.tabList[selIndex].id
      let chartId = this.chartId
      this.$emit('onTabClick', [chartId, selId])
    },
    toDetailClick() {
      this.$router.push({
        name: this.tabList[this.tabSelIndex].path,
        params: {
          tabIndex: this.tabSelIndex
        }
      })
    },
    initChart() {
      // debugger
      let echarts = require('echarts')
      let myChart = echarts.init(document.getElementById(this.randomId))
      let option = this.getInitChartData()
      myChart.setOption(option)
    },
    getInitChartData() {
      let option = {
        //图表配置
        tooltip: {
          trigger: 'axis'
        },
        color: ['#2482E9', '#7BD4B6', '#F5E389', '#8DD5FB'],
        legend: {
          top: '22px',
          right: '16px '
        },
        grid: {
          top: '23%',
          bottom: '20%',
          left: '20%',
          right: '10%'
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#969696'
          },
          axisLine: {
            lineStyle: {
              color: '#D7D7D7'
            }
          }
        },
        yAxis: {
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#969696'
          },
          nameTextStyle: {
            color: '#969696'
          },
          name: '人'
        },
        dataZoom: [{
          type: 'inside',
          throttle: '10'
        }]
      }
      return option
    },
    updateChartData() {
      let echarts = require('echarts')
      let myChart = echarts.init(document.getElementById(this.randomId))
      myChart.clear()
      myChart.setOption(this.getInitChartData())
      if (!this.chartData || !this.chartData.dimensions || !this.chartData.dimensions) return
      let mOption = {
        dataset: {
          dimensions: this.chartData.dimensions,
          source: this.chartData.source
        },
        series: [{
          type: 'line',
          symbol: 'emptyCircle',
          symbolSize: 8,
          areaStyle: {
            // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
            color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [{
                  offset: 0,
                  color: '#71a4ec'
                },
                  {
                    offset: 0.8,
                    color: '#ffffff'
                  }
                ],
                false
            ),
            origin: 'start'
          }
        }]
      }
      //动态添加折线配置
      let lineMore = {
        type: 'line',
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: {
          type: 'dotted'
        }
      }
      this.chartData.dimensions.forEach((item, index) => {
        if (index > 1) {
          mOption.series.push(lineMore)
        }
      })
      myChart.setOption(mOption)
    }
  }
}
